<template>
	<div class="profit-wrap">
		<div class="filter-bar">
			<text
				class="txt">{{ query.startDate }}{{ query.startDate == query.endDate ? '' : ` 至 ${query.endDate}` }}</text>
			<div class="filter-btn" @click="filterHandle">
				<span>筛选</span>
				<span class="iconfont icon-shaixuan"></span>
			</div>
		</div>
		<div class="merchantInfo">
			<div class="bottom">
				<div class="left">
					<div class="price">{{ toFixedNum(total.amount) }}</div>
					<div class="name">总{{ typeAllName }}(元)</div>
				</div>
				<div class="right">
					<div class="price">{{ total.count }}</div>
					<div class="name">总笔数(笔)</div>
				</div>
			</div>
		</div>
		<!-- <div class="merchant-search">
			</text>
			<div class="filter-btn" @click="filterHandle">
				<span>筛选</span>
				<span class="iconfont icon-shaixuan"></span>
			</div>
		</div>
		<div class="merchantInfo">
			<div class="bottom">
				<div class="left">
					<div class="price">{{ toFixedNum(total.amount) }}</div>
					<div class="name">{{type==0?'总分润金额':'总交易量'}}(元)</div>
				</div>
				<div class="right">
					<div class="price">{{ total.count }}</div>
					<div class="name">总笔数(笔)</div>
				</div>
			</div>
		</div>
		 <div class="merchant-search">
      <u-search
        v-model="query.merchNameOrMerchno"
        shape="round"
        show-action
        clearable
        placeholder="请输入商户名称或商户编号"
        @search="queryHandle"
      >
      </u-search>
    </div> -->
		<u-popup v-model="popupShow" mode="top" :border-radius="20">
			<div class="filter-body">
				<div class="filter-content">
					<div class="filter-tiem">
						<h2 class="tit">交易日期</h2>
						<ul class="select-list clearfix">
							<li v-if="tradType !== 2" :class="tradTimeType === 1 ? 'select-item cur' : 'select-item'"
								@click="tradTimeHandle(1)">当天</li>
							<li :class="tradTimeType === 2 ? 'select-item cur' : 'select-item'"
								@click="tradTimeHandle(2)">本月</li>
							<li :class="tradTimeType === 3 ? 'select-item cur' : 'select-item'"
								@click="tradTimeHandle(3)">上月</li>
							<li :class="tradTimeType === 4 ? 'select-item cur' : 'select-item'"
								@click="tradTimeHandle(4)">今年</li>
							<li :class="tradTimeType === 5 ? 'select-item cur' : 'select-item'"
								@click="tradTimeHandle(5)">近一年</li>
						</ul>
					</div>
					<div class="filter-tiem">
						<h2 class="tit">自定义</h2>
						<u-field v-model="query.startDate" label-width="0" :disabled="true" clickable
							name="datetimePicker" :value="value" right-icon="arrow-down-fill" placeholder="选择开始日期"
							@click="fieldTimeHandle(1)" />
						<u-field v-model="query.endDate" readonly clickable label-width="0" name="datetimePicker"
							right-icon="arrow-down-fill" :value="value" placeholder="选择结束日期"
							@click="fieldTimeHandle(2)" />
						<text class="tips"></text>
					</div>
					<div class="title">机具编号</div>
					<input class="pop-input" v-model="query.serialno" type="text" placeholder="请输入机具编号" />
					<div class="title">商户号</div>
					<input class="pop-input" v-model="query.merchNo" type="text" placeholder="请输入机具编号" />
					<div class="title">代理商编号</div>
					<input class="pop-input" v-model="query.agentNo" type="text" placeholder="请输入机具编号" />
					<div class="title">政策</div>
					<div class="pop-input" @click="showPolicyPicker = true">
						{{ query.policyName }}
						<u-icon name="arrow-down" />
					</div>
					
					<div class="footer-btn">
						<div class="btn-left"><button class="reset" size="large" type="warn"
								@click="resetHandle">重置</button></div>
						<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button>
						</div>
					</div>
				</div>
			</div>
		</u-popup>

		<u-picker mode="time" v-model="showPicker" title="选择年月日" @confirm="pickerConfirmHandle" start-year="2021"
			@cancel="showPicker = false" confirm-color="#4888FB" />

		<u-picker title="政策" v-model="showPolicyPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onConfirm" @cancel="showPolicyPicker = false" />

		<!-- <div class="merchant-today-info">
      <div class="merchant-today-info-left">
        总金额
        <label class="merchant-today-info-number">{{
          toFixedNum(totalAmount)
        }}</label
        >元
      </div>
      <div class="merchant-today-info-right">
        总交易量
        <label class="merchant-today-info-number">{{ transCount }}</label
        >笔
      </div>
    </div> -->

		<div v-for="(item, index) in list" :key="index" @click="goDetail(item)">
			<!-- <p class="transaction_date" v-if="index !== 0 && !isToday">{{item.transDate}}</p> -->
			<div class="transaction-modular">
				<div class="transaction-item">
					<div class="transaction-infor">
						<p class="code" style="font-size: 30rpx; color: #333">{{ item.merchName }}</p>
						<p style="font-size: 27rpx; color: #333;margin:10rpx 0;">商户号:{{ item.merchNo }}</p>
						<p style="font-size: 27rpx; color: #333">机具号:{{ item.serialno }}</p>
						<p style="font-size: 27rpx; color: #333">
							订单号:{{ item.orderNo }}
							<i slot="right-icon" class="iconfont icon-niantie" @click.stop="copy(item.orderNo)"></i>
						</p>
						<!-- <div class="transType-box">
							<span class="policy-name">{{ item.policyName }}</span>
						</div> -->
						<h2 class="name">
							<i class="time">{{ item.transDate }}</i>
						</h2>
					</div>
					<!-- 通讯费扣费 -->
					<template v-if="type == 7"> 
						<div class="money">￥{{ toFixedNum(item.activeAmount) }}</div>
					</template>
					<!-- 不为伪激活 -->
					<template v-else-if="type != 1">
						<div class="money">￥{{ toFixedNum(item.shareAmount) }}</div>
					</template>
					<template v-else>
						<div class="money">￥{{ toFixedNum(item.dedAmount) }}</div>
					</template>
				</div>
			</div>
		</div>
		<uni-load-more :status="loadMore"></uni-load-more>
	</div>
</template>

<script>
	import {
		formDateToString,
		getCurrentMonthFirst,
		getCurrentMonthLast,
		getUpMonthFirst,
		getUpMonthLast,
		getCurrentYearFirst,
		getUpYearFirst,
		getUpYearLast,
		getCurrentMonthFirst1
	} from '_c/utils/date';
	import {
		trxShareList,
		trxShareSum,
		fakeStandardList,
		fakeStandardSum,
		commFeeList,
		commFeeSum,
		commFeeKKList,
		commFeeKKSum,
		serviceFeeList,
		serviceFeeSum,
		merchStandardList,
		merchStandardSum,
		merchActivationList,
		merchActivationSum,
		withdrawShareList,
		withdrawShareSum,
		preFakeStandardList,
		preFakeStandardSum
	} from '_a/statistics';
	import loadMoreData from '@/mixins/loadmore';

	export default {
		mixins: [loadMoreData],
		name: 'Trading',
		data() {
			return {
				height: '75%',
				popupShow: false,
				showPicker: false,
				minDate: new Date(1900, 0, 1),
				maxDate: new Date(),
				currentDate: new Date(),
				tradTimeType: 2,
				currentType: 1,
				tradType: 1,
				firstTime: '',
				value: '',
				totalAmount: 0, //交易总金额
				transCount: 0, //交易总笔数

				showPolicyPicker: false,
				query: {
					startDate: getCurrentMonthFirst1(new Date()),
					endDate: formDateToString(new Date()),
					policyCode: '',
					policyName: '全部政策', //筛选政策
					agentType: 1
				},
				list: [],
				total: {
					amount: 0,
					count: 0,
					fee: 0
				},
				type: 0, //0:交易分润 , 1:伪激活查询 ,2: 达标查询 ,3:服务费查询, 4:通讯费查询 , 7通讯费扣款
				policyList: [],
				typeAllName: '金额',
				routeType: 'default' //pre : 平行代理 :  ,default 普通入口
			};
		},

		computed: {},
		onLoad(o) {
			this.routeType = o.routeType || 'default'; //pre 平行代理进来的  default 普通进来的
			this.type = o.type;
			let title = '';
			switch (Number(this.type)) {
				case 0:
					title = '交易分润';
					break;
				case 1:
					if (this.routeType == 'pre') {
						title = '平行代理伪激活查询';
					} else {
						title = '伪激活查询';
					}
					break;
				case 2:
					title = '达标查询';
					break;
				case 3:
					title = '服务费查询';
					break;
				case 4:
					title = '通讯费分账查询';
					break;
				case 5:
					title = '激活查询';
					break;
				case 6:
					title = '提现手续费分账查询';
					break;
				case 7:
					title = '通讯费扣款查询'
					break;
				default:
					break;
			}
			uni.setNavigationBarTitle({
				title: title
			});
			let list = JSON.parse(JSON.stringify(this.$store.getters.policyList));
			list.unshift({
				policyName: '全部政策',
				policyCode: ''
			});
			this.policyList = list;
			this.init();
		},
		// 下拉刷新
		async onPullDownRefresh() {
			await this.init();
			uni.stopPullDownRefresh();
		},
		methods: {
			goDetail(item) {
				this.$storage.setStore('statisticsDetailInfo', item);
				this.$nav.push({
					path: '/pages/home/statistics/detail?type=' + this.type
				});
			},
			async getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					status: 1,
					...this.query
				};
				delete params.policyName
				let list, data;
				//0:交易分润 , 1:伪激活查询 ,2: 达标查询 ,3:服务费查询, 4:通讯费查询
				switch (Number(this.type)) {
					case 0:
						data = await trxShareList(params);
						list = data.rows;
						break;
					case 1:
						params.agentType = 1
						delete params.status
						// params.checkStatus = 2;
						if (this.routeType == 'pre') {
							//平行代理进来的
							data = await preFakeStandardList(params);
						} else {
							data = await fakeStandardList(params);
						}
						list = data.rows;
						break;
					case 2:
						data = await merchStandardList(params);
						list = data.rows;
						break;
					case 3:
						data = await serviceFeeList(params);
						list = data.rows;
						break;
					case 4:
						data = await commFeeList(params);
						list = data.rows;
						break;
					case 5:
						data = await merchActivationList(params);
						list = data.rows;
						break;
					case 6:
						data = await withdrawShareList(params);
						list = data.rows;
						break;
					case 7:
						params.status = 2 // 只取扣费成功的
						data = await commFeeKKList(params);
						list = data.rows;
						break;
					default:
						break;
				}
				// console.log(list);
				this.loadMoreStatusDeal(list);
				if (list.length > 0) {
					this.list = this.list.concat(list);
				}
			},
			async getTotal() {
				let params = {
					startDate: this.query.startDate,
					endDate: this.query.endDate,
					...this.query
				};
				let data;
				delete params.policyName
				//0:交易分润 , 1:伪激活查询 ,2: 达标查询 ,3:服务费查询, 4:通讯费查询
				switch (Number(this.type)) {
					case 0:
						data = await trxShareSum(params);
						this.total.amount = data.data.shareAmount;
						this.total.count = data.data.count;
						break;
					case 1:
						params.agentType = 1
						if (this.routeType == 'pre') {
							data = await preFakeStandardSum(params);
						} else {
							data = await fakeStandardSum(params);
						}
						this.total.amount = data.data.dedAmount;
						this.total.count = data.data.count;
						break;
					case 2:
						data = await merchStandardSum(params);
						this.total.amount = data.data.shareAmount;
						this.total.count = data.data.count;
						break;
					case 3:
						data = await serviceFeeSum(params);
						this.total.amount = data.data.shareAmount;
						this.total.count = data.data.count;
						break;
					case 4:
						data = await commFeeSum(params);
						this.total.amount = data.data.shareAmount;
						this.total.count = data.data.count;
						break;
					case 5:
						data = await merchActivationSum(params);
						this.total.amount = data.data.shareAmount;
						this.total.count = data.data.count;
						break;
					case 6:
						data = await withdrawShareSum(params);
						this.total.amount = data.data.shareAmount;
						this.total.count = data.data.count;
						break;
					case 7:
						params.status = 2 // 只取扣费成功的
						data = await commFeeKKSum(params);
						this.total.amount = data.data.amount;
						this.total.count = data.data.count;
						break;
					default:
						break;
				}
			},
			reachBottomCallBack() {
				this.getList();
			},
			// 初始化数据
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.getTotal();
					this.refreshLoad();
				});
			},
			onConfirm(e) {
				console.log(e);
				this.showPolicyPicker = false;
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
			},

			filterHandle() {
				this.popupShow = true;
			},
			tradTypeHandle(type) {
				this.query.pageNum = 1;
				this.query.pageSize = 20;
				this.firstTime = '';
				this.tradType = type;
				this.tradTimeHandle(type);
			},
			tradTimeHandle(type) {
				if (type === 1) {
					this.query.startDate = formDateToString(new Date());
					this.query.endDate = formDateToString(new Date());
				} else if (type === 2) {
					this.query.startDate = getCurrentMonthFirst();
					this.query.endDate = getCurrentMonthLast();
				} else if (type === 3) {
					this.query.startDate = getUpMonthFirst();
					this.query.endDate = getUpMonthLast();
				} else if (type === 4) {
					this.query.startDate = getCurrentYearFirst();
					this.query.endDate = getCurrentMonthLast();
				} else if (type === 5) {
					this.query.startDate = getUpYearFirst();
					this.query.endDate = getUpYearLast();
				}
				if (type !== 1) {
					this.maxDate = new Date(getCurrentMonthLast());
				}
				this.tradTimeType = type;
				this.query.isToday = type !== 1 ? false : true;
			},
			pickerConfirmHandle(value) {
				console.log(value);
				if (this.currentType === 1) {
					this.query.startDate = formDateToString(new Date(value.timestamp * 1000));
				} else {
					this.query.endDate = formDateToString(new Date(value.timestamp * 1000));
				}
				this.showPicker = false;
			},
			fieldTimeHandle(type) {
				// if (this.tradTimeType !== 1) {
				// 	this.showPicker = true;
				// 	this.currentType = type;
				// }
				this.showPicker = true;
				this.currentType = type;
			},
			resetHandle() {
				this.tradTimeType = 2;
				this.currentType = 1;
				this.tradType = 1;
				this.firstTime = '';
				this.query = {
					startDate: getCurrentMonthFirst1(new Date()),
					endDate: formDateToString(new Date()),
					agentType: 2,
					policyCode: '',
					policyName: '全部政策' //筛选政策
				};
			},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.popupShow = false;
			},
			firstTimeMethods(firstTime, totalAmount, transCount) {
				this.firstTime = firstTime;
				this.totalAmount = totalAmount;
				this.transCount = transCount;
			},
			itemClickHandle(transDate) {
				this.tradType = 1;
				this.query.pageNum = 1;
				this.query.pageSize = 20;
				this.query.startDate = transDate;
				this.query.endDate = transDate;
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$tip.toast('复制成功!');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 总的交易信息
	.merchantInfo {
		margin: R(20);
		background: #01a0fe;
		border-radius: R(10);
		color: white;
		padding: R(30) 0;

		.top {
			text-align: center;
		}

		.price {
			font-size: R(36);
		}

		.name {
			font-size: R(24);
			color: #a2d9ff;
		}

		.bottom {
			display: flex;
			justify-content: space-around;
			margin-top: R(30);

			.left,
			.right {
				text-align: center;
				width: 50%;
			}

			.left {
				border-right: 1px solid white;

				.price {
					// border-right: 1px solid white;
				}
			}
		}
	}

	.reset {
		border-radius: R(30);
	}

	.filter-bar {
		padding: R(20px) R(20px) 0;
		font-size: R(28px);
		display: flex;
		color: #828282;
	}

	.filter-bar .txt {
		flex: 1;
	}

	.merchant-today-info {
		display: flex;
		background-color: #f4f4f4;
		color: #828282;
		height: 50px;
		align-items: center;
		padding: 0 R(100px);
		font-size: R(28px);
	}

	.u-cell-item__right-icon {
		margin-top: 10px;
	}

	.merchant-today-info-left {
		flex: 1;
	}

	.merchant-today-info-number {
		color: $themeColor;
	}

	.merchant-search {
		background: #fff;
		padding: R(20px);
	}

	.merchant-search /deep/ .u-cell-item {
		height: 35px;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: R(32px);

		font-weight: 400;
		color: #313131;
		margin-bottom: R(18px);
	}

	.pop-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: R(660px);
		height: R(64px);
		padding: 0;
		background: #f2f2f2;
		border-radius: R(32px);
		padding-left: R(30px);
		padding-right: R(40px);
		margin-bottom: R(30px);
		color: #323233;
		font-size: R(28px);
	}

	.transaction-modular {
		background: #fff;
		margin-top: R(20);
		padding-left: R(25);
	}

	.transaction-modular .transaction-item {
		display: flex;
		min-height: 1;
		align-items: center;
		padding: R(20);
		position: relative;
	}

	.transaction-modular .transaction-item:after {
		content: '';
		position: absolute;
		display: block;
		background: #ddd;
		pointer-events: none;
		z-index: 1;
		height: 1px;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.transaction-modular .transaction-item:last-child:after {
		display: none;
	}

	.transaction-modular .transaction-item .icon {
		display: block;
		width: R(64);
		margin-right: R(20);
	}

	.transType-box {
		margin: R(10) 0;
	}

	.transaction-modular .transaction-item .transaction-infor {
		flex: 1;
	}

	.transaction-modular .transaction-item .transaction-infor .name {
		font-size: R(32);
		color: #333;
	}

	.transaction-modular .transaction-item .transaction-infor .time {
		font-size: R(24);
		margin-left: 0.1;
		color: #bfb9b9;
	}

	.transaction-modular .transaction-item .transaction-infor .code {
		margin-top: R(8);
		color: #666;
		font-size: R(28);
	}

	.transaction-modular .transaction-item .money {
		font-size: R(34);
		color: #333;
		position: absolute;
		right: R(36);
	}

	.transType {
		font-size: R(20);
		margin-left: R(30px);
		text-align: center;
		border: 1px solid red;
		border-radius: R(8);
		padding: 0px R(5);
	}

	.policy-name {
		font-size: R(20px);
		color: #666;
		margin-left: R(6);
	}

	.footer-btn {
		justify-content: center;
	}

	.btn-left {
		margin-left: 0;
		margin-right: 15%;
	}
</style>